<template>
  <div class="home-recommend">
    <div class="recommend-content">
      <div class="recommend-left">
        <home-card
          title="人气动漫角色图片包下载"
          path="/category/moehuivip/acgpack"
          :isSwiper="false"
          :cardList="acgpack"
          :isWrap="true"
        ></home-card>
        <home-card
          title="线稿画集下载"
          path="/category/moehuivip/sketchartbook"
          :isSwiper="false"
          :cardList="sketchartbook"
          :isWrap="true"
        ></home-card>
        <home-card
          title="漫画教程下载"
          path="/category/moehuivip/coursedown"
          :isSwiper="false"
          :cardList="coursedown"
          :isWrap="true"
        >
          <template slot="top-right">
            <nuxt-link to="/category/moehuivip/coursedown/mangadown/saizhuanti"
              >SAI专题</nuxt-link
            ><span>/</span>
            <nuxt-link
              to="/category/moehuivip/coursedown/mangadown/gufengcomic"
              >古风漫画教程</nuxt-link
            ><span>/</span>
            <nuxt-link
              to="/category/moehuivip/coursedown/mangadown/fantasycomic"
              >奇幻漫画教程</nuxt-link
            >
          </template></home-card
        >
        <home-card
          title="原版漫画教程下载"
          path="/category/moehuivip/coursedown/rawcourse"
          :isSwiper="false"
          :cardList="rawcourse"
          :isWrap="true"
        ></home-card>
        <home-card
          title="视频教程下载"
          path="/category/moehuivip/coursedown/mangavideodown"
          :isSwiper="false"
          :cardList="mangavideodown"
          :isWrap="true"
        ></home-card>
        <home-card
          title="画师图包下载 "
          path="/category/moehuivip/painterpack"
          :isSwiper="false"
          :cardList="painterpack"
          :isWrap="true"
        ></home-card>
      </div>
      <Archived></Archived>
    </div>
  </div>
</template>

<script>
import HomeCard from "./HomeCard.vue";
import Archived from "@/components/archived/Archived.vue";
export default {
  components: { HomeCard, Archived },
  data() {
    return {
      acgpack: [],
      sketchartbook: [],
      coursedown: [],
      rawcourse: [],
      mangavideodown: [],
      painterpack: [],
    };
  },
  async fetch() {
    //人气动漫角色图片包下载
    const acgpack = await this.$api.getArticle({
      path: "/category/moehuivip/acgpack",
      num: 4,
    });
    this.acgpack = acgpack.data;
    //线稿画集下载
    const sketchartbook = await this.$api.getArticle({
      path: "/category/moehuivip/sketchartbook",
      num: 4,
    });
    this.sketchartbook = sketchartbook.data;
    //漫画教程下载
    const coursedown = await this.$api.getArticle({
      path: "/category/moehuivip/coursedown",
      num: 4,
    });
    this.coursedown = coursedown.data;
    //原版漫画教程下载
    const rawcourse = await this.$api.getArticle({
      path: "/category/moehuivip/coursedown/rawcourse",
      num: 4,
    });
    this.rawcourse = rawcourse.data;
    //视频教程下载
    const mangavideodown = await this.$api.getArticle({
      path: "/category/moehuivip/coursedown/mangavideodown",
      num: 4,
    });
    this.mangavideodown = mangavideodown.data;
    //画师图包下载
    const painterpack = await this.$api.getArticle({
      path: "/category/moehuivip/painterpack",
      num: 12,
    });
    this.painterpack = painterpack.data;
  },
};
</script>

<style lang="less" scoped>
.home-recommend {
  .recommend-content {
    display: flex;
    justify-content: space-between;
    .recommend-left {
      flex: 1;
    }
  }
}
</style>